﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site_employees.Master" AutoEventWireup="true" CodeBehind="sell_ticket_page_user.aspx.cs" Inherits="Bus_proj.website.sell_ticket_page_user" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../Styles/textbox.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/Stylebuttoncss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #holder{    
height:400px;    
width:200px;
background-color:#FFFFFF;
border:1px solid #A4A4A4;
margin-left:185px;   
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
 list-style: none outside none;
 position: absolute;   
}    
#place li:hover
{
background-color:yellow;      
} 
#place .seat
{


background:url("../Images/stanby.png") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;   
}
#place .selectedSeat
{ 

background-image:url("../Images/seatagree.png");      
}
#place .selectingSeat
{ 

background-image:url('../Images/stanby1.png');
}
#place .Seattrue
{ 

background-image:url("../Images/seatbooking.png");     
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#place .col-2, #place .col-3{
margin-left:30px;
}
#seatDescription li{
verticle-align:middle;    
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}
    .style1
    {
        width: 100%;
    }
    .style2
    {
        height: 21px;
    }
    .style3
    {
        height: 21px;
        width: 452px;
    }
    .style4
    {
        width: 452px;
    }
    .style5
    {
        width: 137px;
    }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Panel ID="Panel1" runat="server">    
    <fieldset class="el02">
    <legend>เลือกจุดจอด</legend>
     <table class="style1">
            <tr>
                <td align="right" class="style3">
                    <asp:Label ID="Label9" runat="server" Text="สถานที่ลง"></asp:Label>
                </td>
                <td class="style2">
                    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" 
                        DataSourceID="LinqDataSource1" DataTextField="Point_name" 
                        DataValueField="Point_id" Width="150px" CssClass="textbox">
                    </asp:DropDownList>
                    <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
                        ContextTypeName="Bus_proj.DataClasses1DataContext" EntityTypeName="" 
                        TableName="Table_Points" Where="Route_id == @Route_id">
                        <WhereParameters>
                            <asp:SessionParameter DefaultValue="0" Name="Route_id" 
                                SessionField="S_Route_id" Type="Int32" />
                        </WhereParameters>
                    </asp:LinqDataSource>
                </td>
            </tr>
        </table>
      </fieldset>
      <asp:Panel ID="Panel2" runat="server">
        <fieldset class="el03">
        <legend>เลือกที่นั่ง</legend>
            <table class="style1">
                <tr>
                    <td class="style4" rowspan="14">
                        <div ID="holder" value="ok">
                            <ul ID="place">
                            </ul>
                        </div>
                    </td>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                    </td>
                    <td class="style12">
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        <asp:Label ID="Label14" runat="server" Text="เลขรอบเดินทาง :"></asp:Label>
                    </td>
                    <td class="style11">
                        <asp:Label ID="Label15" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        <asp:Label ID="Label10" runat="server" Text="ต้นทาง-ปลายทาง :"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label16" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        <asp:Label ID="Label11" runat="server" Text="วันที่เดินทาง :"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label17" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        <asp:Label ID="Label12" runat="server" Text="เวลาเดินทาง :"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label18" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        <asp:Label ID="Label13" runat="server" Text="หมายเลขรถ :"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label19" runat="server" Text="Label"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        <input type="button" id="btnShowNew" value="ตกลง" 
            onclick="return btnShowNew_onclick()" class="classname" />
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td class="style5">
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
            </fieldset>
        </asp:Panel>

&nbsp;
    </asp:Panel> 
    <div style="float: left;">
       <ul id="seatDescription">
            <li style="background: url('../Images/stanby.png') no-repeat scroll 0 0 transparent;">
                ตำแหน่งที่นั่งว่าง</li>
            <li style="background: url('../Images/stanby1.png') no-repeat scroll 0 0 transparent;">
                ตำแหน่งที่นั่งที่ได้เลือก</li> 
            <li style="background: url('../Images/seatagree.png') no-repeat scroll 0 0 transparent;">
                ตำแหน่งที่นั่งที่มีการจำหน่ายแล้ว</li>
            <li style="background: url('../Images/seatbooking.png') no-repeat scroll 0 0 transparent;">
                ตำแหน่งที่นั่งที่มีการจองแล้ว</li>                      
        </ul>
    </div>
    <div style="clear:both;width:100%">
        &nbsp;<%--<input type="button" id="btnShow" value="Show All" />--%></div>
        <asp:Panel ID="PanelPop" runat="server" Style="display: none; cursor: pointer; width: 350px;
        z-index: 111; background-color: White; position: absolute; left: 35%; top: 12%;
        border: outset 2px gray; text-align: center; padding: 10px" class="popUp">
        <p>
            <asp:Label ID="Label_date" runat="server" Text="วันที่จำหน่าย" AssociatedControlID="TextBox_date"></asp:Label>
            <asp:TextBox ID="TextBox_date" runat="server" ReadOnly="True" 
                CssClass="textbox"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" ControlToValidate="TextBox_date"
                runat="server" Display="Dynamic" ErrorMessage="Name is required.">*</asp:RequiredFieldValidator>
        </p>   
        <p>
            <asp:Label ID="Label5" runat="server" Text="เลขรหัสประชาชน" AssociatedControlID="TextBox2"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server" CssClass="textbox" ReadOnly="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox2"
                runat="server" Display="Dynamic" ErrorMessage="Name is required.">*</asp:RequiredFieldValidator>
        </p>          
        <p>
            <asp:Label ID="Label8" runat="server" Text="หมายเลขที่นั่ง" AssociatedControlID="TextBox5"></asp:Label>
            <asp:TextBox ID="TextBox5" runat="server" ReadOnly="true" CssClass="textbox"></asp:TextBox>
        </p>
        <p>
            <asp:Label ID="Label7" runat="server" Text="ค่าโดยสาร" AssociatedControlID="TextBox4" Visible="False"></asp:Label>
            <asp:TextBox ID="TextBox4" runat="server" ReadOnly="true" Visible="False" 
                CssClass="textbox"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4"
                Display="Dynamic" ErrorMessage="Amount is required.">*</asp:RequiredFieldValidator>
        </p>
        <p>
            <asp:Button ID="Bt_save" runat="server" onclick="Bt_save_Click" Text="ตกลง" CssClass="classname" />
            <input type="button" id="btnCancel" value="ยกเลิก" onclick="HidePopup();" class="classname" />
        </p>
    </asp:Panel>
        <script type="text/javascript">
            var settings = {               
                rowCssPrefix: 'row-',
                colCssPrefix: 'col-',
                seatWidth: 35,
                seatHeight: 35,
                seatCss: 'seat',
                selectedSeatCss: 'selectedSeat',
                selectingSeatCss: 'selectingSeat',
                SeattrueCss: 'Seattrue'
            };
            var chargePerSheet;

            var init = function (reservedSeat, reservedSeat2, row, col) {
                var str = [], seatNo, className, seatNo2;
                for (i = 0; i < row; i++) {
                    for (j = 0; j < col; j++) {
                        seatNo = (i + 1);
                        seatNo2 = (i + j * row + 1);
                        className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                        if ($.isArray(reservedSeat) && $.inArray(seatNo2, reservedSeat) != -1) {
                            className += ' ' + settings.selectedSeatCss;
                        }
                        if ($.isArray(reservedSeat2) && $.inArray(seatNo2, reservedSeat2) != -1) {
                            className += ' ' + settings.SeattrueCss;
                        }
                        if (j == 0) {
                            seatNo2 = seatNo + "A";
                        }
                        else if (j == 1) {
                            seatNo2 = seatNo + "B";
                        }
                        else if (j == 2) {
                            seatNo2 = seatNo + "C";
                        }
                        else if (j == 3) {
                            seatNo2 = seatNo + "D";
                        }
                        str.push('<li class="' + className + '"' +
                                  'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                                  '<a title="' + seatNo2 + '">' + seatNo2 + '</a>' +
                                  '</li>');
                    }
                }
                $('#place').html(str.join(''));
                chargePerSheet = $('#<%=TextBox4.ClientID %>').val();
            };

            $('.' + settings.seatCss).live('click', function () {
                if ($(this).hasClass(settings.selectedSeatCss)) {
                    alert('ไม่สามารถเลือกได้');
                }
                else if ($(this).hasClass(settings.SeattrueCss)) {
                    alert('ไม่สามารถเลือกได้');
                }
                else {
                    $(this).toggleClass(settings.selectingSeatCss);
                }

            });

            $('#btnShow').click(function () {
                var str = [];
                $.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
                    str.push($(this).attr('title'));
                });
                alert(str.join(','));
            })

            $('#btnShowNew').click(function () {
                var str = [];
                $.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
                    str.push($(this).attr('title'));
                });
                if (str.length > 0) {
                    $('#<%=TextBox4.ClientID %>').val(str.length * chargePerSheet);
                    $('#<%=TextBox5.ClientID %>').val(str.join(','));
                    ShowPopup();
                }
                else {
                    alert('กรุณาเลือกที่นั่ง');
                }
            })

            function ShowPopup() {
                $('#mask').show();
                $('#<%=PanelPop.ClientID %>').show();
            }
            function HidePopup() {
                $('#mask').hide();
                $('#<%=PanelPop.ClientID %>').hide();
            }         
         </script>
  
    
</asp:Content>

